<template>

    <div class="resume-container">
        <div class="table-head">
            员工履历表
            <a :href="downloadUrl" class="btn-download rt"><i class="fa fa-download" aria-hidden="true"></i>导出履历表</a>
        </div>
        <table id="signTab" class="table table-bordered">
            <tbody>
                    <tr>
                        <td width="5%" class="label-bold" :rowspan="col">员<br>工<br>个<br>人<br>信<br>息</td>
                        <td width="15%" class="label-bold">姓名</td>
                        <td width="15%">{{info.name}}</td>
                        <td width="12%" class="label-bold">所在部门</td>
                        <td width="12%">{{info.dept_descr}}</td>
                        <td width="12%" class="label-bold">职位</td>
                        <td width="12%">{{info.position_desc}}</td>
                        <td width="17%" rowspan="5">
                            <img :src="srcImg" width="100%" alt="" class="form-photo">
                        </td>
                    </tr>
                    <tr>
                        <td class="label-bold">性别</td>
                        <td>{{info.sex_descr}}</td>
                        <td class="label-bold">民族</td>
                        <td>{{info.ethnic_grp}}</td>
                        <td class="label-bold">出生日期</td>
                        <td>{{info.birthdate | handleDate}}</td>
                    </tr>
                    <tr>
                        <td class="label-bold">政治面貌</td>
                        <td>{{info.political_sta_chn}}</td>
                        <td class="label-bold">婚姻状况</td>
                        <td>{{info.mar_desc}}</td>
                        <td class="label-bold">籍贯</td>
                        <td>{{info.native_place_chn}}</td>
                    </tr>
                    <tr>
                        <td class="label-bold">出生地</td>
                        <td>{{info.birthplace}}</td>
                        <td class="label-bold">手机号码</td>
                        <td>{{info.busn_mobile}}</td>
                        <td class="label-bold">电子邮件</td>
                        <td>{{info.email_addr}}</td>
                    </tr>
                    <tr>
                        <td class="label-bold">最高学历</td>
                        <td>{{info.highest_edu}}</td>
                        <td class="label-bold">最高学位</td>
                        <td>{{info.highest_deg}}</td>
                        <td class="label-bold">毕业院校及专业</td>
                        <td>{{info.school_descr}}&nbsp;{{info.major_descr}}</td>
                    </tr>
                    
                    <tr>
                        <td class="label-bold" :rowspan="eduLength">教<br>育<br>经<br>历</td>
                        <td class="label-bold">起 止 日 期</td>
                        <td class="label-bold" colspan="2">毕业院校</td>
                        <td class="label-bold">专业</td>
                        <td class="label-bold">学历</td>
                        <td class="label-bold">学位</td>
                        <td class="label-bold">教育形式</td>
                    </tr>

                    <tr v-for="eduItem in edu" :key="eduItem.id">                     
                            <td>{{eduItem.bgn_dt | handleWorkDate}}-{{eduItem.end_dt | handleWorkDate}}</td>
                            <td colspan="2">{{eduItem.school_descr}}</td>
                            <td>{{eduItem.major_descr}}</td>
                            <td>{{eduItem.education}}</td>
                            <td>{{eduItem.edu_degree}}</td>
                            <td>{{eduItem.educ_type}}</td>           
                    </tr>

                    <tr v-for="item in eduWhite" >
                        
                            <td>&nbsp;</td>
                            <td colspan="2">&nbsp;</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>   
                        
                    </tr>

                    <tr>
                        <td class="label-bold" :rowspan="workExp">工<br>作<br>经<br>历</td>
                        <td class="label-bold" colspan="2">起 止 日 期</td>
                        <td class="label-bold" colspan="2">工作单位</td>
                        <td class="label-bold">部门</td>
                        <td class="label-bold" colspan="2">职位</td>
                    </tr>
                    <tr v-for="workItem in work" :key="workItem.id">
                        
                            <td>{{workItem.start_dt | handleDate}}</td>
                            <td>{{workItem.end_dt | handleDate}}</td>
                            <td colspan="2">{{workItem.employer}}</td>
                            <td>{{workItem.dept_descr}}</td>
                            <td colspan="2">{{workItem.ending_title}}</td>
                      
                    </tr>
                    <tr v-for="me in workWhite">
                        
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td colspan="2">&nbsp;</td>
                            <td>&nbsp;</td>
                            <td colspan="2">&nbsp;</td>
                      
                    </tr>
                                                                         
                    <tr>
                        <td class="label-bold" :rowspan="relationLength">家<br>庭<br>成<br>员<br>及<br>主<br>要<br>社<br>会<br>关<br>系</td>
                        <td class="label-bold">姓名</td>
                        <td class="label-bold">与本人关系</td>
                        <td class="label-bold" colspan="2">工作单位</td>
                        <td class="label-bold">职位</td>
                        <td class="label-bold" colspan="2">联系电话</td>
                    </tr>
                    <tr v-for="relationItem in relation" :key="relationItem.id">
                        
                            <td>{{relationItem && relationItem.name}}</td>
                            <td>{{relationItem && relationItem.relationship}}</td>
                            <td colspan="2">{{relationItem && relationItem.school_descr}}</td>
                            <td>{{relationItem && relationItem.occupation}}</td>
                            <td colspan="2">{{relationItem && relationItem.phone}}</td>
                      
                    </tr>
                    <tr v-for="relationItem in relationWhite">
                            <td>&nbsp;</td>
                            <td></td>
                            <td colspan="2"></td>
                            <td></td>
                            <td colspan="2"></td>
                        
                    </tr>


                    <tr>
                        <td class="label-bold" :rowspan="certificateLength">所<br>获<br>证<br>书</td>
                        <td class="label-bold" colspan="2">证书名称</td>
                        <td class="label-bold" colspan="2">证书等级</td>
                        <td class="label-bold">发证日期</td>
                        <td class="label-bold" colspan="2">发证机构</td>
                    </tr>

                     <tr v-for="certificateItem in certificate" :key="certificateItem.id">
                        
                            <td colspan="2">{{certificateItem.certificate}}</td>
                            <td colspan="2">{{certificateItem.cert_grade}}</td>
                            <td >{{certificateItem.issue_date | handleBirthdate}}</td>
                            <td colspan="2">{{certificateItem.issue_authority}}</td>
                      
                    </tr>
                    <tr v-for="relationItem in certificateWhite">
                            <td colspan="2">&nbsp;</td>
                            <td colspan="2"></td>
                            <td></td>
                            <td colspan="2"></td>         
                    </tr>                          
                </tbody>
        </table>
    </div>



</template>
<script>
export default {
  name: "resume",
  data() {
    return {
      personResumeInfo: null,
      info: null,
      imgsrc: null,
      work: null,
      workWhite: null,
      workLength: null,
      edu: null,
      eduWhite: null,
      relation: null,
      relationWhite: null,
      certificate: null,
      certificateWhite: null,
      col: 5,
      workExp: 8,
      eduLength: 5,
      relationLength: 5,
      certificateLength: 5,
      srcImg: null
    };
  },
  created: function() {


// getEmployeeImg

	let type = localStorage.getItem('resumeType')

	let url = type==1?this.URL.getLoginUserImg.url:this.URL.getEmployeeImg.url;
	
	if (type == 2) {
		this.srcImg = this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + localStorage.getItem('em') + '&sex=' +localStorage.getItem('em_sex') + '&token=' + localStorage.getItem('token');
		return;
	} else {
		this.srcImg = this.Axios.baseURI + this.URL.getLoginUserImg.url + "?token=" + localStorage.getItem('token');
		return;
	}
	
//	let params = type==1?{}:{emplid:localStorage.getItem('em')};
//	this.Axios.Post(url,params).then(res => {
//	  	this.srcImg = "data:image/png;base64," + res.data.message;
//	});
	
  },
  computed: {

    downloadUrl: function() {
     let type = localStorage.getItem('resumeType')
     let url = type==1?this.URL.userResumeExport.url:this.URL.employResumeExport.url
	 if (type==1) {
	 	return this.Axios.baseURI + url+ "?token="+localStorage.getItem('token');
	 } else {
	 	return this.Axios.baseURI + url+ "?emplid=" + localStorage.getItem('em')+"&token="+localStorage.getItem('token');
	 }
     
    }
  },
  props: {},
  filters: {
    handleBirthdate: function(value) {
      if (!value) {
        return '';
      }
      return value.split(" ")[0];
    },
    handleDate: function(value) {
      if (!value) {
        return '';
      }
      return value.split(" ")[0].replace(/-/g, function() {
        return ".";
      });
    },
    handleWorkDate: function(value) {
      if (!value) {
        return '';
      }
      return value
        .split(" ")[0]
        .replace(/-/, function() {
          return ".";
        })
        .split("-")[0];
    }
  },
  methods: {
    getEmplid: function(keyToValue) {
      var url = window.location.search;
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        // var keys = [],values = [];
        for (var i = 0; i < strs.length; i++) {
          var splitKey = strs[i].split("=");
          if (keyToValue === splitKey[0]) {
            return splitKey[1];
            // break;
          }
        }
      }
    }
  },
  mounted: function() {
    var self = this;
    //获取侧边菜单栏数据

     let type = localStorage.getItem('resumeType')
     let url = type==1?this.URL.getEmployeeDetail.url:this.URL.resumeForm.url
	 let params = type==1?{}:{emplid:localStorage.getItem('em')}
    this.Axios
      .Post(url,params)
      .then(function(res) {
        var personResumeInfo =
          typeof res.data === "string"
            ? JSON.parse(res.data).datas
            : res.data.datas;
        self.personResumeInfo = personResumeInfo;
        self.info = JSON.parse(JSON.stringify(personResumeInfo.info[0]));
        self.work = JSON.parse(JSON.stringify(personResumeInfo.work));
        if (self.work.length < 7) {
          self.workWhite = new Array(7 - self.work.length);
        } else {
          self.workExp = self.work.length + 1;
        }
        self.edu = JSON.parse(JSON.stringify(personResumeInfo.edu));

        if (self.edu.length < 4) {
          self.eduWhite = new Array(4 - self.edu.length);
        } else {
          self.eduLength = self.edu.length + 1;
        }
        console.log(self.eduWhite);

        self.relation = JSON.parse(JSON.stringify(personResumeInfo.relation));

        if (self.relation.length < 4) {
          self.relationWhite = new Array(4 - self.relation.length);
        } else {
          self.relationLength = self.edu.length + 1;
        }

        self.certificate = JSON.parse(
          JSON.stringify(personResumeInfo.certificate)
        );

        if (self.certificate && self.certificate.length < 4) {
          self.certificateWhite = new Array(4 - self.certificate.length);
        } else {
          self.certificateLength = self.certificate.length + 1;
        }
      });
  }
};
</script>
<style scoped>

  .resume-container .table-head {
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
  }
  .resume-container .table-head .btn-download {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
  }

  .resume-container {
    width: 86%;
    
    margin: auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
  }

  .resume-container .table-bordered {
    border: 1px solid #ddd;
  }
  .resume-container .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .resume-container .table-bordered td {
    border: 1px solid #ddd;
  }
  .resume-container .table .label-bold {
    font-weight: bold;
  }
  .resume-container .form-photo {
    width: 222px;
    height: 222px;
    vertical-align: middle;
  }

  .resume-container .table tbody tr td {
    text-align: center;
    vertical-align: middle;
    font-family: 宋体;
    word-break: break-all;
  }
  .resume-container .table > thead > tr > th,
  .table > tbody > tr > th,
  .resume-container .table > tfoot > tr > th,
  .table > thead > tr > td,
  .resume-container .table > tbody > tr > td,
  .resume-container .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    border-top: 1px solid #ddd;
  }

</style>

